import * as echarts from 'echarts';
// import{ getDateRangeString } from '@/utils/func/util'
export function getOptionsForRankBar(xData, yData, yLabel){
  var option = {
    grid: {
        left: '5%',
        right: '10%',
        bottom: '5%',
        top: '10%',
        containLabel: true,
    },
    legend: {//图例组件，颜色和名字
      right: 10,
      top: 15,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
        textStyle: {
          color: '#fff',
          opacity:'0.6',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,            
      }
  },    
    tooltip: {
        show: false,
        trigger: "item",
        backgroundColor:"rgba(0,0,0,0)",
        borderColor:"rgba(0,0,0,0)",
        triggerOn: "mousemove",
        enterable:true,
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)',
        padding:[0],
        textStyle: {
          color: '#fff', // 文本颜色
          fontSize: 24, // 文本大小
          fontWeight: 500,
        },
         formatter: "<span style='font-size:16px;'>{c}次</span>",
    },
    // backgroundColor: '#031d33',
    xAxis: {
        show: true,
        type: 'value',
        // data:xData
        splitNumber: 7,
        axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontSize: 16,
                // fontWeight: 'bolder'
            },
            formatter: function (value) {
              if (value >= 10000) {
                return (value / 10000).toFixed(1).replace(/(\.0+$)/, "")+'w'; 
              } else {
                return value.toLocaleString()
              }
            }
        },
        axisLine: {
            show: true, // X轴 网格线 颜色类型的修改
            lineStyle: {
                type: 'solid',
                opacity: '0.15',
                color: 'rgba(255,255,255,1)'
            },
        },
        splitLine: {
            show: true, // X轴线 颜色类型的修改
            lineStyle: {
                type: 'solid',
                color: 'rgba(77, 128, 254, 0.2)',
            },
        },
    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                margin: 25,
                textStyle: {
                    color: '#fff',
                    fontSize: '16',
                    fontWeight: 'bolder',
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
              show: true, // Y轴 网格线 颜色类型的修改
              lineStyle: {
                  type: 'solid',
                  opacity: '0.15',
                  color: 'rgba(255,255,255,1)'
              },
            },           
            data: yLabel,
        },
    ],
    series: [
        {
            name: '',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 1,
                        color: '#48DCF3',
                    },
                    {
                        offset: 0,
                        color: '#276CC9',
                    },
                    ]),
                },
            },
            barWidth: 23,
            data: yData,
            label: {// 右侧label数字
              normal: {
                  show: true,
                  position: 'right',
                  formatter: function(params) { return params.value.toLocaleString()},
                  color:'#fff',
                  fontSize:'14px'
              }
          }, 
        }
    ],
}
  return option;

}

//7天开机率
export function getOptionsForRightpie(data1, total, title, percent){
  const option = {
    tooltip: {
      backgroundColor:"rgba(0,0,0,0)",
      borderColor:"rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable:true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding:[0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 23, // 文本大小
        fontWeight: 500,
      },
      formatter: (params) => {
        return `<div class="tms-pie-tool-tip">
                  <div class="title">${params.name}：</div> 
                  <p class="first-child">${Number(params.value).toLocaleString()}次</p>
                  <p class="last-item">(${params.percent}%)</p>
                <div>`
      }
    },        
    title: [
      {
        // text: '{val|' + ((data1/total).toFixed(2)) * 100 +'%'+ '}\n{name|' + title + '}',
        text: '{val|' + percent + '}\n{name|' + title + '}',
        x: 'center',
        y: '43%',
        textStyle: {
          rich: {
            val: {
                fontSize: 20,
                fontWeight: 'bold',
                color: '#fff',
                padding:[-20,0,0,0]
            },
            name: {
                fontSize: 14,
                fontWeight: 'bold',
                color: '#fff',
                padding: [5, 0, 0, 0],
                align:'center'
            },
          },
        },
    },
],
color: ['rgba(176, 212, 251, 1)'],
series: [
    {
        type: 'pie',
        // clockWise: true,
        radius: ['52%', '65%'],
        center:['50%', '46%'],
        itemStyle: {
          normal: {
              label: {
                  show: false,
              },
              labelLine: {
                  show: false,
              },
          },
        },
        data: [
            {
              value: data1,
              name: '近7天开机率',
              itemStyle: {
                normal: {
                    color: '#4C98FF',
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
              },
            },
            {
              name: '其他',
              value: total-data1,
              itemStyle: {
                normal: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
              },
            },
        ],
    },
],
};
return option;
}
//TMS激活终端类型占比
export function getOptionsForAppAllPie(data){
  let colorList = [
    "#39FDC0",
    "#6CDDFF",
    "#FF6CD1",
    "#FFD66C",
    "#6C98FF",
    "#F39348","#A048F3","#48F3C1","#F34848","#48F381"];
  function generateRandomColorList(count) {
    const colorList = [];
    for (let i = 0; i < count; i++) {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      colorList.push(`rgb(${r},${g},${b})`);
    }
    return colorList;
  }
  // 超出制定颜色多余生成随机颜色
  if(data.length >10) colorList = colorList.concat(generateRandomColorList(data.length-10))
  const option = {
    title: {
      text:'{val|' + data.reduce((accumulator, currentValue) => accumulator + parseInt(currentValue.value), 0).toLocaleString()+'}\n{name|全部} ',
      // x: '45%',
      top: '44%',
      left: '59%',
      textAlign: 'center',
      textBaseline: 'middle',
      textStyle: {
        rich: {
          val: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#fff',
              padding:[0,0,0,0]
          },
          name: {
              align:'center',
              fontSize: 14,
              fontWeight: 'bold',
              color: '#fff',
              padding: [5, 0, 0, 0],
          },
        }}
    },
    tooltip: {
      backgroundColor:"rgba(0,0,0,0)",
      borderColor:"rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable:true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding:[0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      position: function (point, params, dom, rect, size) {
          // 提示框位置
          let x, y
          // 当前鼠标位置
          // const titleBoxWidth = document.querySelector('.tms-pie-tool-tip')?(document.querySelector('.tms-pie-tool-tip').offsetWidth):''
          const pointX = point[0]+20
          const pointY = point[1]
          // 提示框尺寸
          const boxWidth = size.contentSize[0]
          const boxHeight = size.contentSize[1]
          // 容器尺寸
          const viewWidth = size.viewSize[0]
          // 设置光标左右位置
          if (viewWidth - boxWidth < pointX) {
            // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
            x = pointX
          } else {
            // 默认紧贴光标右侧显示
            x = pointX+30
          }
          // 设置光标上下位置
          if (boxHeight < pointY) {
            // 光标位置 小于 提示框位置，上面放不下，放在下侧
            y = pointY
          } else {
            // 默认紧贴光标上侧显示
            y = pointY
          }
          // 记录提示框位置
          // if (window.tooltipSpace?.position) window.tooltipSpace.position = [x, y]
          return [x, y]
      },
      //  formatter: "<span style='font-size:16px;'>{b}</span> <br/><span style='display:inline-blank;position:relative;top:-10px;'>{d}%</span>",
       formatter: (params) => {
        return `<div class="tms-pie-tool-tip">
                  <div class="title">${params.name}：</div> 
                  <p class="first-child">${Number(params.value).toLocaleString()}</p>
                  <p class="last-item">(${params.percent}%)</p>
                <div>`
      },
    },
    legend: {
      icon: 'rect',
      orient: 'vertical', // 横向显示图例
      pageIconColor: '#ff781f', // 设置翻页箭头颜色
      type: 'scroll',
      pageTextStyle: {
        color: '#fff' // 设置翻页数字颜色
      },
      pageIconSize: 11, // 设置翻页箭头大小
      textStyle: { // 设置图例文字的样式
        color: '#fff',
        fontSize: 12
      },
      itemHeight: 10, // 设置图例项的高度
      itemWidth: 15, // 设置图例项的宽度
      left: "5%",
      right: "30%",
      top: "8%",
      width: 500,
      height: '80%', // 设置图例高度
      itemGap: 15,
      formatter: function(name){
          return `${name}`;
      }
    },
    series: [
      {
        type: "pie",
        radius: ['52%', '65%'],
        center:['60%', '46%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
              show: false,
              position: 'outside',
              formatter: '{c}'
          }
       },
      //  labelLine: {
      //    normal: {
      //        show: true,
      //        length: 10,
      //        length2: 20
      //    }
      //  },
        itemStyle: {
            normal: {
                color: function(params) {
                  return colorList[params.dataIndex];
                }
            }
        },
        data: data
      }
    ]
  };
  return option
}
/**
 * 应用启动趋势
 * @param {Array} xData 
 * @param {Array} yData 
 * @param {Number} currentTab  1 昨日 2 近7日 3 近30日
 * @returns 
 */
export function getOptionsForLineBottom(xData, yData, currentTab) {
  var option = {
    tooltip: {
      trigger: 'item',
      confine: false,
      alwysShowContent: false,
      backgroundColor:"rgba(0,0,0,0)",
      borderColor:"rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable:true,
      // 去掉阴影
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding:[0],
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const titleBoxWidth = (document.querySelector('.puple-common-tip').offsetWidth)*0.7
        const pointX = point[0]-titleBoxWidth
        const pointY = point[1]-9
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX
        } else {
          // 默认紧贴光标右侧显示
          x = pointX
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
          // window.tooltipLineSpace = true
        } else {
          // window.tooltipLineSpace = false
          // 默认紧贴光标上方显示
          y = pointY - 110
        }
        return [x, y]
      },
      formatter: (params) => {
         console.log(JSON.stringify(currentTab))
      //  ${currentTab=='1' ? `<p>${getDateRangeString().yesterday}</p>` : ``}
      //  ${currentTab=='2' ? `<p>${getDateRangeString().lastSevenDays.split('～')[0]}～</p><p>${getDateRangeString().lastSevenDays.split('～')[1]}</p>` : ``}
      //  ${currentTab=='3' ? `<p>${getDateRangeString().lastThirtyDays.split('～')[0]}～</p><p>${getDateRangeString().lastThirtyDays.split('～')[1]}</p>` : ``}
      // <p>${currentTab=='1'?(getDateRangeString().yesterday) : currentTab=='2' ? (getDateRangeString().lastSevenDays) : (getDateRangeString().lastThirtyDays)}</p>
        return `<div class="puple-common-tip">
                <div class="title">${params.name}</div> 
                <p><span class="total-box">${params.value ? params.value.toLocaleString():''}</span>次</p>
              <div>`
      }
  },
  grid: {
    top: '15%',
    left: '5%',  // 设置左边距，根据实际情况调整
    right: '3%', // 设置右边距
    bottom: '5%', // 设置底部距离
    containLabel: true // 包含标签，确保标签不会被裁剪
  },
  xAxis: [{
      type: 'category',
      boundaryGap: false,
      // axisLine: { //坐标轴轴线相关设置。数学上的x轴
      //     show: false,
      //     lineStyle: {
      //         color: '#233653'
      //     },
      // },
      axisLabel: { //x坐标轴设置
          interval: currentTab == 3 ? 1 : 0, // 每隔两个标签显示一次
          rotate: ( currentTab== 2 || currentTab== 3) ? 45 : 0,
          // rotate: 45,
          textStyle: {
              color: '#fff', 
              padding: 16,
              fontSize: 15
          },
          formatter: function(data) {
              return data
          }
      },
      splitLine: {
          show: false,
          lineStyle: {
              color: '#276CC9'
          },
      },
      axisTick: {
          show: false,
      },
      data: xData
  }],
  yAxis: [{
    min: 0,
    splitLine: {
        show: true,
        lineStyle: {
            color: '#233653' //网格线颜色
        },
    },
    axisLine: {
        show: false,
        lineStyle: {
            color: "#233653"
        }
    },
    axisLabel: {
        show: true,
        textStyle: {
            color: '#fff', //y轴设置
            padding: 16,
            fontSize: 15
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(1).replace(/(\.0+$)/, "")+'w'; 
          } else {
              return value.toLocaleString()
          }
        }
        // formatter: function(value) {
        //     if (value === 0) {
        //         return value
        //     }
        //     return value
        // }
    },
    axisTick: {
        show: false,
    },
  }], 
    series: [
    {
        name: '近7日',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize:14,
        // smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: "rgba(72,160,243,1)", // 线条颜色
            },
        },
        itemStyle: {
            color: "rgba(72,160,243,1)",
        },
        areaStyle:{
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(39,108,201,0.4)"
                    },
                    {
                        offset: 1,
                        color: "rgba(72,160,243,1)"
                    }
                ], false),
            }
        },
        data: yData
    }    
    ]
  };
  return option;
}

